<style rel="stylesheet/scss" lang="scss" scoped>
	.info-containter {
		display: flex;
		flex: 1;
		min-height: 100%;
		padding: 20px;
		box-sizing: border-box;
		flex-direction: column;
		.box-flex {
			display: flex;
			margin-bottom: 20px;
		}
		.w-span {
			min-width: 100px;
			line-height: 40px;
			display: inline-block;
		}
		.img-box {
			width: 100px;
			height: 100px;
			border: 1px solid #e5e5e5;
		}
		.tet-btn{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
<template>
	<div class="info-containter">
		<el-form label-position="left" style="margin-left:50px;" inline class="demo-table-expand" label-width="240px">
			<el-row>
				<el-col>
					<el-form-item label="店铺图片">
						<div v-loading="loadding">
							<el-upload 
								:on-exceed="uploadModel.exceed" 
								:action="uploadModel.uploadUrl" 
								list-type="picture-card" 
								:on-preview="uploadModel.onPreview"
							    :limit="4" 
								:on-remove="uploadModel.onRemove" 
								:on-success="uploadModel.onUploadSuccess" 
								:file-list="uploadModel.fileList"
							    :on-progress="uploadModel.progress" 
								:on-error="uploadModel.error" 
								:before-upload="uploadModel.onBefore">
								<i class="el-icon-plus"></i>
							</el-upload>
						</div>
					</el-form-item>
				</el-col>
				<el-col>
					<div style="margin-top:-120px;color: #fa5555;font-size: 12px;">推荐尺寸375*240</div>
				</el-col>
			</el-row>
			<!-- <el-row>
				<el-col>
					<el-form-item label="分类页广告">
						<div v-loading="loadding1">
							<el-upload 
								:action="uploadModel.uploadUrl" 
								list-type="picture-card" 
								:on-preview="uploadModel1.onPreview" 
								:limit="4" 
								:on-remove="uploadModel1.onRemove"
							    :on-success="uploadModel1.onUploadSuccess" 
								:file-list="uploadModel1.fileList" 
								:on-progress="uploadModel1.progress"
							    :on-error="uploadModel1.error" 
								:before-upload="uploadModel1.onBefore">
								<i class="el-icon-plus"></i>
							</el-upload>
						</div>
					</el-form-item>
				</el-col>
				<el-col>
					<div style="margin-top:-120px;color: #fa5555; font-size: 12px;">推荐尺寸375*220</div>
				</el-col>
			</el-row> -->
		</el-form>
		<div class="tet-btn">
			<el-button type="primary" @click="saveAdvFn">保存</el-button>
		</div>
		<el-dialog :visible.sync="imageDialogModel.show">
			<img width="100%" :src="imageDialogModel.imageUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
	import {
			setToken
		} from '@/utils/auth'
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS,
		FILE_URL
	} from '@/utils/config.js'
	import router from '@/router'
	export default {
		data() {
			return {
				loadding: false,
				loadding1: false,
				imageDialogModel: {
					show: false,
					imageUrl: ""
				},
				uploadModel: {
					disabled: false,
					uploadUrl: "",
					fileList: [],
					exceed: () => {
						this.$message({
							type: "info",
							message: "最多只能上传四张"
						});
					},
					onRemove: (file, fileList) => {
						if (this.loadding) {
							this.loadding = false;
							return;
						}
						this.uploadModel.fileList = fileList;
					},
					onBefore: (file) => {
						console.log(3)
						console.log(file)
						let maxSize = 1024*1024*5
						if(file.size > maxSize) {
							this.$message({
								type: 'error',
								message: '请上传小于5M图片'
							})
							this.loadding = false;
							return false
							
						}
						if (this.loadding) {
							return false;
						}
					},
					onPreview: file => {
						console.log(file)
						if(file.response) {
							console.log(file.response.message)
						}
						this.imageDialogModel.imageUrl = file.url;
						this.imageDialogModel.show = true;
					},
					onUploadSuccess: (response, file, fileList) => {
						
						if(response.status != 200) {
							setToken('')
							this.$message({
								type: 'error',
								message: response.message
							})
							
							
							return
						}
						let maxSize = 1024*1024*5
						if(file.size > maxSize) {
							this.$message({
								type: 'error',
								message: '请上传小于5M图片'
							})
							this.loadding = false;
							return
							
						}
						console.log("上传成功");
						let dt = {
							name: "1.png",
							url: response.data.filename
						};

						window.myvue.uploadModel.fileList.push(dt);
						this.loadding = false;
					},
					error: () => {
						console.log(1)
						this.loadding = false;
					},
					progress: (event, file) => {
						console.log(file)
						this.loadding = true;

						
					},
					doPreview: () => {}
				},
				uploadModel1: {
					disabled: false,
					uploadUrl: "",
					fileList: [],
					onRemove: (file, fileList) => {
						if (this.loadding1) {
							this.loadding1 = false;
							return;
						}
						this.uploadModel1.fileList = fileList;
					},
					onBefore: (file) => {
						let maxSize = 1024*1024*5
						if(file.size > maxSize) {
							this.$message({
								type: 'error',
								message: '请上传小于5M图片'
							})
							this.loadding = false;
							return false
							
						}
						if (this.loadding1) {
							return false;
						}
					},
					onPreview: file => {
						this.imageDialogModel.imageUrl = file.url;
						this.imageDialogModel.show = true;
					},
					onUploadSuccess: (response, file, fileList) => {
						console.log(response.data.filename);
						
						if(response.status != 200) {
							setToken('')
							this.$message({
								type: 'error',
								message: response.message
							})
							return
						}
						let maxSize = 1024*1024*5
						if(file.size > maxSize) {
							this.$message({
								type: 'error',
								message: '请上传小于5M图片'
							})
							this.loadding = false;
							return
							
						}
						let dt = {
							name: "1.png",
							url: response.data.filename
						};

						window.myvue.uploadModel1.fileList.push(dt);
						this.loadding1 = false;
					},
					error: () => {
						this.loadding1 = false;
					},
					progress: () => {
						this.loadding1 = true;
					},
					doPreview: () => {}
				}
			}
		},
		created() {
			this.uploadModel.fileList = []
			this.uploadModel1.fileList = []
			this._initData()
		},
		mounted() {
			window.myvue = this;
			this.uploadModel.uploadUrl = FILE_URL

		},
		methods: {
			saveAdvFn() {
				console.log(this.uploadModel.fileList)
				let b_img = []
				let c_img = []
				if(!this.uploadModel.fileList.length || !this.uploadModel1.fileList.length){
					this.$message({
						type: 'error',
						message: '请至少上传一张图片'
					})
					return
				}
				this.uploadModel.fileList.forEach((item) => {
					b_img.push(item.url)
				})
				this.uploadModel1.fileList.forEach((item) => {
					c_img.push(item.url)
				})
				this.$ajax({
					api: 'merchant/banner/update',
					params: {
						token: getToken(),
						mainBanner: b_img.join(','),
						classifyBanner: c_img.join(','),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							type: 'success',
							message: '保存成功'
						})
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
				
				
				
			},
			_initData() {
				this.$ajax({
					api: 'merchant/banner',
					params: {
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							''
					}
				}).then(res => {
					console.log(res)
					if(res.status ===SUCCESS_REQUEST_STATUS) {
						let fileList = res.data.mainBanner.split(',')
						for(let i in fileList) {
							var dt = {
								name: "1.png",
								url: fileList[i]
							};
							this.uploadModel.fileList.push(dt)
						}
						let fileList1 = res.data.classifyBanner.split(',')
						for(let i in fileList1) {
							var dt = {
								name: "1.png",
								url: fileList1[i]
							};
							this.uploadModel1.fileList.push(dt)
						}
						
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			}
		}
	}
</script>
